<template>
	<div class="limiter">
		<div
			class="container-login100"
			style="background-image: url('/assets/images/img-01.jpg')"
		>
			<div class="wrap-login100 p-t-190 p-b-30">
				<van-form @submit="onSubmit" class="login100-form validate-form">
					<div class="login100-form-avatar">
						<img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
					</div>
					<span class="login100-form-title p-t-20 p-b-45">Hello</span>
					<div class="wrap-input100 validate-input m-b-10">
						<van-field
							class="input100"
							v-model="mobile"
							name="mobile"
							label=" "
							placeholder="请输入手机号"
							:rules="[
								{ required: true, message: '请填写手机号' },
								{ pattern: mobileRegular, message: '请输入正确手机号' },
							]"
						/>
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-user"></i>
						</span>
					</div>
					<div class="wrap-input100 validate-input m-b-10">
						<van-field
							v-model="password"
							class="input100"
							type="password"
							name="password"
							label=" "
							placeholder="请输入密码"
							:rules="[{ required: true, message: '请填写密码' }]"
						/>
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock"></i>
						</span>
					</div>
					<div class="container-login100-form-btn p-t-10">
						<button class="login100-form-btn">登 录</button>
					</div>

					<div class="text-center w-full p-t-25">
						<a href="javascript;" class="txt1" @click.prevent="forgot1">忘记密码？</a>
					</div>

					<div class="text-center w-full mt20">
						<router-link to="/business/register" class="txt1">
							立即注册
							<i class="fa fa-long-arrow-right"></i>
						</router-link>
					</div>
				</van-form>
			</div>
		</div>
	</div>
</template>

<script setup>
	let mobile = ref("17875880193");
	let password = ref("root");
	let mobileRegular = /^1[3456789]\d{9}$/;
	let router = useRouter();
	let { cookies } = useCookies();
	// 登录功能
	let onSubmit = async (values) => {
		let result = await Api.business.login(values);

		if (result.code == 1) {
			let time = new Date(new Date() * 1 + 12 * 60 * 60 * 1000);
			cookies.set("LoginUser", result.data, time);
			showSuccessToast({
				message: result.msg,
				onClose: function () {
					router.push("/business/index");
				},
			});
		} else {
			showFailToast(result.msg);
		}
	};
	// 忘记密码
	let forgot1 = async () => {
		let result = await Api.business.forgetPwd({mobile:mobile.value});
		if (result.code == 1) {
			router.push("/business/forgot?mobile=" + mobile.value);
		} else {
			showFailToast(result.msg);
		}
	};
</script>

<style scoped lang="scss">
	@import url("/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css");
	@import url("/assets/css/util.css");
	@import url("/assets/css/main.css");
	.wrap-input100 .input100 {
		line-height: 3.2;
		::v-deep .van-field__error-message {
			transform: translateY(-26px);
		}
	}
	.mt20 {
		margin-top: 20px;
	}
</style>